var storage = window.localStorage

var addor = document.getElementById('add')//添加
var editor = document.getElementById('editor')//编辑
var cancel = document.getElementById('cancel')//取消
var saver = document.getElementById('saver')//保存
var back = document.getElementById('back')//返回主页入口

if(window.location.search =='')location.href = 'log.html'//防盗链
var str = JSON.parse(decodeURI(window.location.search).substring(1))//解析地址栏
var username = str.username//获取用户名

var percent = JSON.parse(storage.getItem(username)).percent//百分比
var lan = JSON.parse(storage.getItem(username)).lan//语言
var degree = JSON.parse(storage.getItem(username)).degree//熟练度

var row = function (lan, percent, degree) {//一行行的构造函数
    this.lan = lan
    this.percent = percent
    this.degree = degree
}

var info = new Array()//存储一行行的对象数列

for (var i = 0; i < lan.length; i++) {//存储信息到info
    info.push(new row(lan[i], percent[i], degree[i]))
}

console.log(str)
var tbody = document.querySelector('tbody')

function update()//同步到本地locastorage
{
    var lan = new Array()
    var percent = new Array()
    var degree = new Array()
    for (var i = 0; i < info.length; i++) {
        lan.push(info[i].lan)
        percent.push(info[i].percent)
        degree.push(info[i].degree)
    }

    var temp = JSON.parse(storage.getItem(username))
    temp.lan = lan
    temp.percent = percent
    temp.degree = degree
    storage.setItem(username, JSON.stringify(temp))

}

//test
function test(){
    var input = document.getElementsByTagName('input')
    for(var i=0;i<input.length;i++){
        input[i].className = 'blackcolor'
    }
}

//初始化渲染
function init() {
    info.forEach(element => {
        var tr = document.createElement('tr')
        for (const key in element) {
            var td = document.createElement('td')
            td.innerHTML = '<input type="text" class="whitecolor"+ value=' + element[key] + ' disabled></input>'
            tr.append(td)
        }
        var td_del = document.createElement('td')
        td_del.className = 'td_del'
        td_del.innerHTML = '<span class="del">删除</span>'
        tr.append(td_del)
        tbody.append(tr)
    });
    update()
}
init()

var td_del = document.getElementsByClassName('td_del')

//点击编辑
editor.onclick = function () {
    
    //隐藏
    editor.style.display = 'none'
    //出现
    addor.style.display = 'block'
    saver.style.display = 'block'
    cancel.style.display = 'block'
    for (var i = 0; i < td_del.length; i++) {
        td_del[i].style.display = 'block'
    }

    //tr遍历解禁
    var tr = document.querySelectorAll('tr')
    for (var i = 1; i < tr.length; i++) {
        for (var j = 0; j < 3; j++) {
            tr[i].children[j].children[0].removeAttribute('disabled')
            tr[i].children[j].children[0].className = 'choose'
            if (j == 2) {
                var degree = tr[i].children[j].children[0].value

                tr[i].children[j].innerHTML = '<select name="" id=""><option value="">精通</option><option value="">熟练</option><option value="">掌握</option></select>'
                if (degree == '精通') {
                    tr[i].children[j].children[0].children[0].selected = true
                }
                else if (degree == '熟练') {
                    tr[i].children[j].children[0].children[1].selected = true
                }
                else if (degree == '掌握') tr[i].children[j].children[0].children[2].selected = true
            }

        }
    }
    test()

}


//点击取消
cancel.onclick = function () {

    //隐藏
    cancel.style.display = 'none'
    addor.style.display = 'none'
    saver.style.display = 'none'
    for (var i = 0; i < td_del.length; i++) {
        td_del[i].style.display = 'none'
    }

    //出现
    editor.style.display = 'block'

    //tr遍历限制
    var tr = document.querySelectorAll('tr')

    //删除
    for (var i = 1; i < tr.length; i++) {
        tr[i].remove()
    }

    //初始化
    init()
    td_del = document.getElementsByClassName('td_del')
    del()
}


//点击删除
function del() {
    for (var i = 0; i < td_del.length; i++) {
        td_del[i].onclick = function () {
            this.parentElement.remove()
        }
    }
}
del()


//点击保存
saver.onclick = function () {
    //tr遍历
    var tr = document.querySelectorAll('tr')
    console.log(tr.length)
    //特判
    for (var i = 1; i < tr.length; i++) {
        if (tr[i].children[0].children[0].value == '' || tr[i].children[1].children[0].value == '') {
            alert('不允许留空')
            return
        }
    }
    //清空数组
    info = []
    //隐藏
    cancel.style.display = 'none'
    addor.style.display = 'none'
    saver.style.display = 'none'
    //出现
    editor.style.display = 'block'
    //删除多余数据
    for (var i = 1; i < tr.length; i++) {
        tr[i].remove()
    }
    //保存数据到数组info
    for (var i = 1; i < tr.length; i++) {
        var index = tr[i].children[2].children[0].selectedIndex
        info.push(new row(tr[i].children[0].children[0].value, tr[i].children[1].children[0].value, tr[i].children[2].children[0].children[index].innerHTML))
    }
    //初始化
    init()
    //激活删除
    del()
}

//点击添加
addor.onclick = function () {
    //渲染
    var tr = document.createElement('tr')
    for (var i = 0; i < 3; i++) {
        var td = document.createElement('td')
        td.innerHTML = '<input type="text"></input>'
        td.children[0].className = 'choose'
        tr.append(td)
        if (i == 2) {
            tr.children[2].innerHTML = '<select name="" id=""><option value="">精通</option><option value="">熟练</option><option value="">掌握</option></select>'
        }
    }
    //补齐删除
    var td_del = document.createElement('td')
    td_del.className = 'td_del'
    td_del.innerHTML = '<span class="del">删除</span>'
    tr.append(td_del)
    tbody.append(tr)
    //显示
    td_del.style.display = 'block'
    //激活删除
    del()
}
//点击返回
back.onclick = function () {
    var lan = new Array()
    var percent = new Array()
    var degree = new Array()
    for (var i = 0; i < info.length; i++) {
        lan.push(info[i].lan)
        percent.push(info[i].percent)
        degree.push(info[i].degree)
    }
    location.href = './index.html?' + JSON.stringify({ code: str.code, username: username })
}
//返回动画
back.onmouseover = function(){
    back.className = 'layui-icon layui-icon-rate-solid layui-anim layui-anim-scale light'
}
back.onmouseout = function(){
    back.className = 'layui-icon layui-icon-rate-solid'
}